<template>
  <a-row class="login">
    <a-col :span="8" :offset="8" class="login-main">
      <h1 style="text-align: center"><rocket-two-tone />&nbsp;12306售票系统</h1>
      <a-form
          :model="loginForm"
          name="basic"
          autocomplete="off"
      >
        <a-form-item
            label=""
            name="mobile"
            :rules="[{ required: true, message: '请输入手机号!' }]"
        >
          <a-input v-model:value="loginForm.mobile" placeholder="手机号"/>
        </a-form-item>

        <a-form-item
            label=""
            name="code"
            :rules="[{ required: true, message: '请输入验证码!' }]"
        >
          <a-input v-model:value="loginForm.code">
            <template #addonAfter>
              <a @click="sendCode">获取验证码</a>
            </template>
          </a-input>
          <!--<a-input v-model:value="loginForm.code" placeholder="验证码"/>-->
        </a-form-item>

        <a-form-item>
          <a-button type="primary" block @click="login">登录</a-button>
        </a-form-item>

      </a-form>
    </a-col>
  </a-row>
</template>

<script setup>
import { reactive } from 'vue';
import axios from 'axios'
import {notification} from 'ant-design-vue'
import { useRouter, useRoute} from 'vue-router'
import store from '@/store/index'

const router = useRouter()
const loginForm = reactive({
  mobile: '18402853395',
  code: '',
});
const sendCode = async () => {
  const res = await axios.post('/member/member/send-code', {
    mobile: loginForm.mobile
  })
  const data = res.data
  if (data.success) {
    notification.success({description: '发送验证码成功！'})
    loginForm.code = '8888'
  } else {
    notification.error({description: data.message})
  }
}

const login = async () => {
  const res = await axios.post('/member/member/login', {
    mobile: loginForm.mobile,
    code: loginForm.code
  })
  const data = res.data
  if (data.success) {
    notification.success({description: '登录成功！'})
    // 登录成功
    router.push('/')
    store.commit("setMember", data.content)
  } else {
    notification.error({description: data.message})
  }
}
</script>

<style scoped>
.login-main h1 {
  font-size: 25px;
  font-weight: bold;
}
.login-main {
  margin-top: 100px;
  padding: 30px 30px 20px;
  border: 1px solid dimgray;
  border-radius: 10px;
  background-color: #fcfcfc;
}
</style>